<h2>Ordenes de Servicio</h2>

<script type="text/javascript">
    function foo1(idTabla,id)
    {
        tabla = document.getElementById(idTabla);
        tr_tabla = tabla.getElementsByTagName('tr');
        
        for(i=0; i<tr_tabla.length ;i++)
        {
            inputs = tr_tabla.getElementsByTagName('input');
            alert('la fila'+i+' posee '+inputs.lenght+' inputs');
        }


    }

</script>

<div>
    <table id="tabla1">
        <thead>
            <th>Titulo 1.1</th>
            <th>Titulo 1.2</th>
        </thead>
        <tbody>
            <tr>
                <td><input id="id1" value="identificador1"></td>
                <td>algo2</td>
            </tr>
            <tr>
                <td>algo3</td>
                <td>algo4</td>
            </tr>
        </tbody>
        <thead>
            <th>Titulo 1.1</th>
            <th>Titulo 1.2</th>
        </thead>
    </table>

    <table id="tabla2">
        <thead>
            <th>Titulo 2.1</th>
            <th>Titulo 2.2</th>
        </thead>
        <tbody>
            <tr id="fila1">
                <td><input id="id2" value="identificador2"></td>
                <td>algo6</td>
            </tr>
            <tr id="fila2">
                <td>algo7</td>
                <td>algo8</td>
            </tr>
        </tbody>
        <thead>
            <th>Titulo 2.1</th>
            <th>Titulo 2.2</th>
        </thead>
    </table>

    <input type="button" value="Valores Tabla 1" onclick="foo1('tabla1','id1')">
    <input type="button" value="Valores Tabla 2" onclick="foo1('tabla2','id1')">
    
</div>

<h1>Tabla hech con Divs y estilo css</h1>

<script type="text/javascript">
    function recorrer()
    {
        tabla = document.getElementById('#tablaDiv');
        alert('La tabla tiene'+tabla.getElementsByTagName(tagName)+'filas');
    }

</script>

<div id="tablaDiv" class="tabla">

<div class="fila">
<div class="col_titulo" style="width:200px">Programa</div>
<div class="col_titulo" style="width:200px">Comentario</div>
<div class="col_titulo" style="width:100px">Licencia</div>
<div class="col_titulo" style="width:50px">Visitas</div>
</div>

<div id="fila" class="fila">
<div class="col" style="width:200px">1 BY 1 1.43</div>
<div class="col" style="width:200px">Reproductor MP3</div>
<div class="col" style="width:100px">freeware</div>
<div class="col" style="width:50px">325</div>
</div>

<div id="fila" class="fila">
<div class="col" style="width:200px"><input id="1"/></div>
<div class="col" style="width:200px"><input id="2"/></div>
<div class="col" style="width:100px"><input id="3" style="width:80px"/></div>
<div class="col" style="width:50px"><input id="4" style="width:50px"/></div>
</div>

<div id="fila" class="fila">
<div class="col" style="width:200px"><input id="5"/></div>
<div class="col" style="width:200px"><input id="6"/></div>
<div class="col" style="width:100px"><input id="7" style="width:80px"/></div>
<div class="col" style="width:50px"><input id="8" style="width:50px"/></div>
</div>
</div>

<input type="button" value="Recorrer 'tabla-Div'" onclick="recorrer()">